<!-- 
  @author : andy
  @description : 头部导航组件
-->
<template>
  <div class="header-sidebar">
    <div class="header-logo" v-if="configStore.showSidebarLogo">
      <Logo />
    </div>
    <div class="layout-menu">
      <a-menu mode="horizontal" v-model:selected-keys="selectedKeys" :inline-indent="12" @click="onClickMenuItem">
        <template v-for="item in accessStore.accessMenus" :key="item.code">
          <template v-if="!item.children || item.children.length === 0">
            <a-menu-item :key="item.code" :title="false">
              <template #icon>
                <img v-if="item.icon" class="menu-icon" :src="item.icon" />
              </template>
              {{item.name}}
            </a-menu-item>
          </template>
          <template v-else>
            <a-sub-menu :key="item.code">
              <template #icon>
                <img v-if="item.icon" class="menu-icon" :src="item.icon" />
              </template>
              <template #title>{{item.name}}</template>
              <template v-for="menu in item.children" :key="menu.code">
                <template v-if="!menu.children || menu.children.length === 0">
                  <a-menu-item :key="menu.code">
                    <template #icon>
                      <img v-if="item.icon" class="menu-icon" :src="item.icon" />
                    </template>
                    {{menu.name}}
                  </a-menu-item>
                </template>
                <template v-else>
                  <SubMenu :menu="menu" />
                </template>
              </template>
            </a-sub-menu>
          </template>
        </template>
      </a-menu>
    </div>
    <slot />
  </div>
</template>

<script lang='ts' setup>
import { useConfigStore } from '@/stores/configs/config';
import Logo from './Logo.vue';
import { useAccessStore } from '@/stores/access/access';
import SubMenu from './SubMenu.vue';
import type { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { findTreeNodeByValue } from '@/utils/tree';
import { useRouter , useRoute } from 'vue-router';
import { ref, watchEffect } from 'vue';
import type { AccessMenuItem } from '@/stores/access/types';
const router = useRouter();
const route = useRoute();
const configStore = useConfigStore();
const accessStore = useAccessStore();
const selectedKeys = ref<string[]>([]);
const onClickMenuItem = ({key}: MenuInfo) => {
  const currentMenu = findTreeNodeByValue(accessStore.accessMenus , 'code' , key , {childProps : 'children'});
  if (currentMenu?.isExternal) {
    window.open(currentMenu.path);
  } else if (currentMenu?.isIframe) {
    router.push(currentMenu.path as string);
  } else {
    router.push(currentMenu?.path as string);
  }
}
const getCurrentMenu = (): AccessMenuItem | null => {
  let current: AccessMenuItem | null = null;
  const go = (tree: AccessMenuItem[]) => {
    tree.forEach(item => {
      if (item.children.length > 0) {
        go(item.children);
      } else {
        if (item.path === route.path) {
          current = item;
        }
      }
    })
  }
  go(accessStore.accessMenus);
  return current;
}
watchEffect(() => {
  const current = getCurrentMenu();
  if (current) {
    selectedKeys.value = [current.code];
    accessStore.setMixedSidebarMenusByCode(current.code);
  }
});
</script>

<style lang='less' scoped>
.header-sidebar {
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
  .header-logo {
    min-width: 2.4rem;
  }
  .layout-menu {
    flex: 1;
    height: 100%;
    .menu-icon {
      width: 0.16rem;
      height: 0.16rem;
      object-fit: cover;
      transition: all 0.3s;
    }
  }
}
</style>